<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/html/axios.min.js"></script>
<script src="/html/util.js"></script>
<script>
    var id = getQuery("id");
    window.onload = function (){
        showTitle();
        showRes();
    }

    function showTitle(){
        axios.get("/topic/findById",{
            params: {
                id
            }
        }).then(e => {
            var topicObj = e.data;
            $('topicName').innerHTML = "主题名字:"+topicObj.name;
            $('userName').innerHTML = topicObj.user.code;
            $('userFace').src = "/html/img/"+topicObj.user.face;
            $('userInDate').innerHTML = topicObj.user.createDate;
            $('topicInfo').innerHTML = "主题:"+topicObj.name+"@"+topicObj.deliverDate
            $("topic").innerHTML = topicObj.name;
        })
    }


    function commit(){
        axios.get("/res/add",{
            params: {
                title:$('resName').value,
                info:$('info').value,
                topicId:id
            }
        }).then(e => {
            if (e.data == 'ok') {
                location.href = "/html/main.html";
            }else {
                location.href = "/html/login.html"
            }
        })
    }

    function showRes(){
        axios.get("/topic/findById",{
            params: {
                id
            }
        }).then(e => {
            var topicObj = e.data;
            var str = "";
            for (var i=0;i<topicObj.resList.length;i++){
                var resObj = topicObj.resList[i];
                str += `<tr><td>${resObj.user.code}</td><td>${resObj.title}</td>
                        <td>${resObj.info}</td><td>${resObj.dateTime}</td></tr>`
            }
            $('resData').innerHTML = str;
        })
    }
</script>
<body>
    <h5 id="topicName"></h5>
    <div style="display: flex">
        <div>
            <span id="userName"></span><br>
            <img id="userFace" style="width: 50px;height: 50px"><br>
            <span id="userInDate"></span>
        </div>
        <div>
            <h4 style="border: 1px solid #ff0000" id="topicInfo"></h4>
            <div id="topic"></div>
        </div>
    </div>
    <h5>回贴</h5>
    <div style="width: 800px;border: 1px solid #ff0000">
        <table width="100%">
            <thead>
                <tr><td>回帖人</td><td>回帖标题</td><td>回贴内容</td><td>回帖时间</td></tr>
            </thead>
            <tbody id="resData"></tbody>
        </table>
    </div>
    <div style="width:800px;border: 1px solid black">
        标题:<input type="text" id="resName"><br>
        内容:<textarea id="info"></textarea><br>
        <input type="button" value="发表" onclick="commit()">
    </div>
</body>
</html>